<template>
  <div id="app">
    <div
      style="width: 400px; height: 400px"
      class="echarts"
      ref="chart"
    >
    
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "HelloPie",

  data() {
    return {
      total:'888'
    };
  },

  mounted() {
    var myChart = echarts.init(this.$refs.chart);
    myChart.setOption({
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      color: ["rgb(75,139,253)", "rgb(245,125,125)"],

      series: [
        {
          name: "Access From",
          type: "pie",
          selectedMode: "single",
          radius: ["25%", "30%"],
          label: {
            position: "inner",
            fontSize: 14,
          },
          data: [
            { value: 1548, name: "" },
            { value: 775, name: "" },
            { value: 679, name: "" },
          ],
        },
        {
          name: "Access From",
          type: "pie",
          radius: ["20%", "19%"],
          label: {
            position: "inner",
            fontSize: 14,
          },
          data: [
            { value: 1, name: "" },
            { value: 2, name: "" },
          ],
        },
      ],
    });
  },

  methods: {},
};
</script>

<style lang="less" scoped>
</style>
